import React, { useState } from "react";
import "./index.scss";
import ScrollSlider from "./components/scrollWarapper";
import ScrollBig from "./components/serollBig";
const Home = () => {
  const content = [
    <div
      style={{
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      🌟 欢迎来到我们的平台！
      <a
        href="https://gitee.com/Tangzhonghe"
        style={{
          textDecoration: "none",
          color: "#007bff",
          cursor: "pointer",
          fontSize: "12px",
        }}
        onMouseEnter={(e) => (e.target.style.textDecoration = "underline")}
        onMouseLeave={(e) => (e.target.style.textDecoration = "none")}
      >
        在线体验
      </a>
    </div>,
    <div
      style={{
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      🚀 新功能已上线，快来体验！
    </div>,
    <div
      style={{
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      🎉 今日抽奖赢好礼～
    </div>,
  ];

  const items = [
    { title: "logo", content: "这是logo展开内容" },
    { title: "商店", content: "这是商店展开内容" },
    { title: "Mac", content: "这是Mac展开内容" },
    { title: "iPad", content: "这是iPad展开内容" },
    { title: "iPhone", content: "这是iPhone展开内容" },
    { title: "Watch", content: "这是Watch展开内容" },
    { title: "Vision", content: "这是Vision展开内容" },
    { title: "AirPods", content: "这是AirPods展开内容" },
    { title: "家具", content: "这是家具展开内容" },
    { title: "娱乐", content: "这是娱乐展开内容" },
  ];

  const [index, setIndex] = useState(0);
  const [openIndex, setOpenIndex] = useState(null);
  const [hoveringPanel, setHoveringPanel] = useState(false);
  const handleLeave = () => {
    setTimeout(() => {
      if (!hoveringPanel) setOpenIndex(null);
    }, 4000);
  };
  const next = () => setIndex((prev) => (prev + 1) % content.length);
  const prev = () =>
    setIndex((prev) => (prev - 1 + content.length) % content.length);

  return (
    <div className="view-pot" style={{ position: "relative" }}>
      <div className="top-vie" onMouseLeave={handleLeave}>
        <div className="top-cont" style={{ position: "relative" }}>
          {items.map((item, idx) => (
            <div
              className="fortent"
              key={idx}
              style={{
                position: "relative",
                cursor: "pointer",
              }}
              onMouseEnter={() => setOpenIndex(idx)}
            >
              {item.title}
            </div>
          ))}
        </div>
      </div>
      {/* 展开区域：可以滑入不关闭 */}
      <div
        className={`dropdown-panel ${openIndex !== null ? "show" : ""}`}
        onMouseEnter={() => setHoveringPanel(true)}
        onMouseLeave={() => {
          setHoveringPanel(false);
          setOpenIndex(null);
        }}
      >
        {openIndex !== null && <div>{items[openIndex].content}</div>}
      </div>
      <div className="scodier">
        <div className="marig">
          <div
            style={{
              position: "relative",
              overflow: "hidden",
              height: "80px",
            }}
          >
            {/* 内容轨道 */}
            <div
              style={{
                display: "flex",
                transition: "transform 0.5s ease-in-out",
                transform: `translateX(-${index * 100}%)`,
                height: "100%",
              }}
            >
              {content.map((el, i) => (
                <div
                  key={i}
                  style={{
                    minWidth: "100%",
                    fontSize: "14px",
                  }}
                >
                  {el}
                </div>
              ))}
            </div>

            {/* 左箭头 */}
            <button onClick={prev} style={arrowStyle("left")}>
              &#10094;
            </button>

            {/* 右箭头 */}
            <button onClick={next} style={arrowStyle("right")}>
              &#10095;
            </button>
          </div>
        </div>
      </div>
      <div className="content">
        <div className="title-top">
          <div className="left-top-title">
            <h1>这是我的商店，</h1>
            <h1 style={{ color: "#6e6e73" }}>欢迎你的加入!</h1>
          </div>
          <div className="right-top-title">
            <div className="address">
              <div className="imagekk">
                <img
                  src="https://i.imgtg.com/2023/01/16/QR57a.jpg"
                  className="img"
                />
                <div className="adds">
                  <div style={{ height: "20px" }}>按需要求</div>
                  <div style={{ height: "20px" }}>
                    用户信息
                    <a href="#">选择地址</a>
                  </div>
                </div>
              </div>
              <div className="imagekk">
                <img
                  src="https://i.imgtg.com/2023/01/16/QR57a.jpg"
                  className="img"
                />
                <div className="adds">
                  <div style={{ height: "20px" }}>按需要求</div>
                  <div style={{ height: "20px" }}>
                    用户信息
                    <a href="#">选择地址</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div className="chents-mob">
            <ScrollSlider />
          </div>
          <div className="looke">
            <h2>看看商品吧，</h2>
            <h2 style={{ color: "#6e6e73" }}>谢谢体谅！</h2>
          </div>
          <div className="top-header">
            <ScrollBig />
          </div>
        </div>
        <div className="top-content">
          <div className="looke">
            <h2>Apple Store 有特色，</h2>
            <h2 style={{ color: "#6e6e73" }}>在此选购有的是理由。</h2>
          </div>
          <div className="botts"></div>
        </div>
        <div className="top-bottom">3</div>
      </div>
    </div>
  );
};

const arrowStyle = (side) => ({
  position: "absolute",
  top: "50%",
  [side]: "10px",
  transform: "translateY(-50%)",
  color: "#000",
  border: "none",
  padding: "6px 12px",
  cursor: "pointer",
  fontSize: "16px",
  background: "#fff",
});

export default Home;
